<template>
	<section>
		<div class="popup-mask"></div>
	    <div class="popup-gor-effect"  >
	        <div class="pge-fancy">
	        	<div class="horn"></div>
	        	<div class="arm">
	        		<i></i><i></i><i></i><b></b>
	        	</div>
	        	<div class="arm reverse">
	        		<i></i><i></i><i></i><b></b>
	        	</div>
	            <div class="bg"></div>
	            <dl>
	            	<dt>
	            		<i v-for="count in 15"></i>
	            	</dt>
	            	<dd>
	            		<i v-for="count in 15"></i>
	            	</dd>
	            </dl>
	        </div>
	        <div class="pge-head">
	            {{title}}
	        </div>
	        <div class="pge-close" @click="popClose($event)">
	            &times;
	        </div>
	        <div class="pge-body">
	            <slot></slot>
	        </div>
	    </div>
	</section>
</template>

<script>
    export default {
        name: 'wioc-popup',
        props: {
            title: {
                type: String,
            }
        },
        data() {
            return {

            };
        },
		mounted(){
			
			document.querySelector('.popup-mask').style.zoom = ".595"
			document.querySelector('.popup-gor-effect').style.zoom = ".4"
			
		},
        methods: {
			popClose(event) {
				let _thisbox = event.currentTarget.parentNode.parentNode;
				_thisbox.classList.add("popout");
				setTimeout(()=>{
					this.$emit("get-pop-close");
					_thisbox.classList.remove("popout");
				},500);
			    
			}
        }
    }
</script>

<style lang="less">
	.popup-mask{
		position: fixed;
		top: 0;
		width:3840px;
		height:2160px;
		left: 0;
		z-index: 990;
		background: rgba(0,0,0,.5);
		animation: popupMask .2s ease-in;
	}
	@keyframes popupMask{
	    0% {
			opacity: 0;
		}
	    100% {
	    	opacity: 1;
		}
	}
	.popup-gor-effect{
		position: fixed;
		top:50%;
		left:1920px;
		z-index: 999;
		margin: -725px 0 0 -1275px;
		// padding: 25px 190px 25px 130px;
		width: 2550px;
		height: 1450px;
		animation: popupBox .3s ease-in;
		@keyframes popupBox{
		    0% {
				opacity: 0;
				transform: scale(.01);
			}
		    100% {
				opacity: 1;
				transform: scale(1);
				top: 50%;
				left: 1920px;
			}
		}
		.pge-fancy{
			.horn{
				&:before{
					display: block;
					content: "";
					position: absolute;
					top: 20px;
					left: -25px;
					width: 0;
					height: 80px;
					border-bottom: transparent 22px solid;
					border-right: rgba(58,143,238,.5) 22px solid;
					animation: fancyBottom 1s ease-in;
				}
				@keyframes fancyBottom{
				    0%,33.33% {
				    	left: -3px;
				    	height: 0;
						border-right-width: 0;
				    	opacity: 0;
					}
					66.66%{
				    	left: -25px;
				    	height: 0;
						border-right-width: 22px;
						opacity: 1;
					}
				    95% {
				    	height: 90px;

					}
				    100% {
				    	height: 80px;

					}
				}
				&:after{
					display: block;
					content: "";
					position: absolute;
					top: -2px;
					left: -25px;
					width: 0;
					height: 0;
					border-top: transparent 22px solid;
					border-right: #3a8fee 22px solid;
					animation: fancyTop .5s ease-in;
				}
				@keyframes fancyTop{
				    0%,50% {
				    	left: -3px;
						border-right-width: 0;
						opacity: 0;
					}
				    100% {
				    	left: -25px;
						border-right-width: 22px;
						opacity: 1;
					}
				}
			}
			.arm{
				position: absolute;
				right: 0;
				bottom: 530px;
				&.reverse{
					right: auto;
					left: -60px;
					bottom: 500px;
					transform: rotate(180deg);
				}
				i{
					display: block;
					position: absolute;
					box-shadow: 0 0 20px #3a8fee;
					background: #3a8fee;
					&:nth-child(1){
						right: 1px;
						bottom: 0;
						width: 60px;
						height: 4px;
						transform-origin: left center;
						transform: rotate(-45deg);
						animation: arm1 1.3s ease-in;
					}
					@keyframes arm1{
					    0%,76.92% {
					    	right: 61px;
					    	width: 0px;
							transform: rotate(0deg);
						}
					    88.46% {
					    	right: 1px;
					    	width: 60px;
							transform: rotate(0deg);
						}
					    100% {
					    	transform:rotate(-45deg);
						}
					}
					&:nth-child(2){
						right: 17px;
						bottom: 43px;
						width: 4px;
						height: 280px;
						transform-origin: center bottom;
						transform: rotate(0deg);
						animation: arm2 1.6s ease-in;
					}
					@keyframes arm2{
					    0%,81.25% {
							height: 0px;
						}
					    100% {
					    	height: 280px;
						}
					}
					&:nth-child(3){
						right: 17px;
						bottom: 322px;
						width: 4px;
						height: 75px;
						transform-origin: center bottom;
						transform: rotate(45deg);
						animation: arm3 1.9s ease-in;
					}
					@keyframes arm3{
					    0%,84.21% {
					    	height: 0px;
							transform: rotate(0deg);
						}
						92.1%{
							height: 75px;
							transform: rotate(0deg);
						}
					    100% {
					    	transform:rotate(45deg);
						}
					}
				}
				b{
					display: block;
					position: absolute;
					right: -43px;
					bottom: 385px;
					margin: 0 -15px -15px 0;
					width: 22px;
					height: 22px;
					border: #3a8fee 4px solid;
					border-radius: 22px;
					box-shadow: 0 0 20px #3a8fee, 0 0 10px #3a8fee inset;
					animation: arm4 2.1s ease-in;
				}
				@keyframes arm4{
				    0%,90.47% {
						right: -32px;
						bottom: 374px;
						transform: scale(.01);
				    	opacity: 0;
					}
				    100% {
						right: -43px;
						bottom: 385px;
						transform: scale(1);
				    	opacity: 1;
					}
				}
			}
			.bg{
				position: absolute;
				top: -58px;
				left: -60px;
				width: 2670px;
				height: 1566px;
				background: url(./img/popup-bg.png) no-repeat center;
			}
			dl{
				dt{
					position: absolute;
					top: 25px;
					left: 40px;
				}
				dd{
					position: absolute;
					bottom: 45px;
					right: 38px;
					transform: rotate(180deg);
				}
				i{
					display: block;
					margin-bottom: 17px;
					width: 35px;
					height: 6px;
					background: #3a8fee;
					&:nth-child(1){
						animation: routed1 1s ease-in ;
					}
					&:nth-child(2){
						animation: routed2 1.1s ease-in ;
					}
					&:nth-child(3){
						animation: routed3 1.2s ease-in ;
					}
					&:nth-child(4){
						animation: routed4 1.3s ease-in ;
					}
					&:nth-child(5){
						animation: routed5 1.4s ease-in ;
					}
					&:nth-child(6){
						animation: routed5 1.5s ease-in ;
					}
					&:nth-child(7){
						animation: routed5 1.6s ease-in ;
					}
					&:nth-child(8){
						animation: routed5 1.7s ease-in ;
					}
					&:nth-child(9){
						animation: routed5 1.8s ease-in ;
					}
					&:nth-child(10){
						animation: routed5 1.9s ease-in ;
					}
					&:nth-child(11){
						animation: routed5 2s ease-in ;
					}
					&:nth-child(12){
						animation: routed5 2.1s ease-in ;
					}
					&:nth-child(13){
						animation: routed5 2.2s ease-in ;
					}
					&:nth-child(14){
						animation: routed5 2.3s ease-in ;
					}
					&:nth-child(15){
						animation: routed5 2.4s ease-in ;
					}
				}
				@keyframes routed1{
				    0%,90% {
						margin-left: -50px;
				    	opacity: 0;
					}
				    100% {
				    	margin-left: 0;
				    	opacity: 1;
					}
				}
				@keyframes routed2{
				    0%,90.9% {
						margin-left: -50px;
				    	opacity: 0;
					}
				    100% {
				    	margin-left: 0;
				    	opacity: 1;
					}
				}
				@keyframes routed3{
				    0%,91.66% {
						margin-left: -50px;
				    	opacity: 0;
					}
				    100% {
				    	margin-left: 0;
				    	opacity: 1;
					}
				}
				@keyframes routed4{
				    0%,92.3% {
						margin-left: -50px;
				    	opacity: 0;
					}
				    100% {
				    	margin-left: 0;
				    	opacity: 1;
					}
				}
				@keyframes routed5{
				    0%,92.85% {
						margin-left: -50px;
				    	opacity: 0;
					}
				    100% {
				    	margin-left: 0;
				    	opacity: 1;
					}
				}
				@keyframes routed6{
				    0%,93.33% {
						margin-left: -50px;
				    	opacity: 0;
					}
				    100% {
				    	margin-left: 0;
				    	opacity: 1;
					}
				}
				@keyframes routed7{
				    0%,93.75% {
						margin-left: -50px;
				    	opacity: 0;
					}
				    100% {
				    	margin-left: 0;
				    	opacity: 1;
					}
				}
				@keyframes routed8{
				    0%,94.11% {
						margin-left: -50px;
				    	opacity: 0;
					}
				    100% {
				    	margin-left: 0;
				    	opacity: 1;
					}
				}
				@keyframes routed9{
				    0%,94.44% {
						margin-left: -50px;
				    	opacity: 0;
					}
				    100% {
				    	margin-left: 0;
				    	opacity: 1;
					}
				}
				@keyframes routed10{
				    0%,94.73% {
						margin-left: -50px;
				    	opacity: 0;
					}
				    100% {
				    	margin-left: 0;
				    	opacity: 1;
					}
				}
				@keyframes routed11{
				    0%,94.73% {
						margin-left: -50px;
				    	opacity: 0;
					}
				    100% {
				    	margin-left: 0;
				    	opacity: 1;
					}
				}
				@keyframes routed12{
				    0%,95% {
						margin-left: -50px;
				    	opacity: 0;
					}
				    100% {
				    	margin-left: 0;
				    	opacity: 1;
					}
				}
				@keyframes routed13{
				    0%,95.23% {
						margin-left: -50px;
				    	opacity: 0;
					}
				    100% {
				    	margin-left: 0;
				    	opacity: 1;
					}
				}
				@keyframes routed14{
				    0%,95.45% {
						margin-left: -50px;
				    	opacity: 0;
					}
				    100% {
				    	margin-left: 0;
				    	opacity: 1;
					}
				}
				@keyframes routed15{
				    0%,95.65% {
						margin-left: -50px;
				    	opacity: 0;
					}
				    100% {
				    	margin-left: 0;
				    	opacity: 1;
					}
				}
			}
		}
		.pge-head{
			display: none;
			position: absolute;
			top: 0;
			left: 120px;
			z-index: 20;
			height: 120px;
			font-size: 48px;
			color: #fff;
			line-height: 120px;
			text-indent: 15px;
			&:before{
				display: block;
				content: "";
				position: absolute;
				left: 0;
				bottom: 0;
				width: 950px;
				height: 2px;
				background-image: linear-gradient(to right, rgba(58,143,248,1) , rgba(58,143,248,.2));
			}
		}
		.pge-close{
			position: absolute;
			top: 0;
			right: 55px;
			z-index: 30;
			width: 140px;
			height: 140px;
			font-size: 120px;
			color: #3a8fee;
			line-height: 140px;
			text-align: center;
			cursor: pointer;
		}
		.pge-body{
			position: relative;
			width: 100%;
			height: 100%;
			z-index: 10;
            margin-top: 120px;;
		}
	}
	.popout{
		.popup-mask{
			opacity: 0;
			animation: popMaskout .2s ease-out;
		}
		@keyframes popMaskout{
		    0% {
				opacity: 1;
			}
		    100% {
		    	opacity: 0;
			}
		}
		.popup-gor-effect{
			opacity: 0;
			transform: scale(.01);
			animation: popBoxout .2s ease-out;
		}
		@keyframes popBoxout{
		    0% {
				opacity: 1;
				transform: scale(1);
			}
		    100% {
				opacity: 0;
				transform: scale(.01);
			}
		}
	}
</style>
